<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        Vue中使用组件的三大步骤:
            (1).定义组件(创建组件)
            (2).注册组件
            (3).使用组件(写组件标签)
        
        1.如何定义一个组件
            使用Vue.extend(option),其中options和new Vue(options)时传入的哪个options几乎是一样的,但是:
            区别如下:
                (1)不写el--原因:最终所有组件都要经过一个vm管理,由vm中的el决定服务哪个容器
                (2)data必须写成函数---原因:避免组件被复用时,数据存在引用关系
            备注:使用template可以配置组件结构,但是只能有一个根节点
        
        2.如何注册组件
            (1)局部注册:靠new Vue的时候传入components:{key:value,...}选项
            (2)全局注册:靠Vue.component('组件名',组件)

        3.编写组件标签:
            <school></school>
     -->

    <div id="root">
        <!-- 第三步:编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
        <hr>
        <hello></hello>
    </div>
    <div id="root2">
        <hello></hello>
    </div>

    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        // 组件定义:实现应用中局部功能代码和资源的集合
        // 第一步:创建school组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名字:{{schoolName}}</h2>
                    <h2>学校地址:{{address}}</h2>
                    <button @click="showName">点我提示名字</button>
                </div>
            `,
            // el:'#root',//组件定义时,不需要写el配置项,因为所有组件最终被一个vm实例所管理,有vm决定服务于哪个容器
            data(){
                return{
                    schoolName:'华北水利水电大学',
                    address:'郑州',
                }
            },
            methods: {
                showName(){
                    alert(this.schoolName)
                }
            },
        })
        // 创建student组件
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生姓名:{{studentName}}</h2>
                    <h2>学生年龄:{{age}}</h2>
                </div>
            `,
            data() {
                return {
                    studentName:'jiagnwei',
                    age:18
                }
            },
        })
        //创建hello组件
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>你好啊!{{name}}</h2>
                </div> 
            `,
            data() {
                return {
                    name:'张三'
                }
            },
        })
        // 第二部:注册全局hello组件
        Vue.component('hello', hello)


        // 创建vm
        new Vue({
            el:'#root',
            //第二步:注册组件:components里面是key:value,其中key是组件名
            components:{
                school:school,
                student:student
            }
        })
        new Vue({
            el:'#root2'
        })
    </script>
</body>
</html>